/*
* Created on Tue Jun 13 2023 by Admin
*
* Copyright (c) 2023 shuangdi
*
* description: index
*
* date: 2024/10/23
*/
<template>
  <div class="root_graph" ref="graphDom"></div>
</template>

<script setup>
import {initGraph as graphMethod} from "./config/main"
import {handleData} from './config/handleData'
import {onBeforeUnmount, ref} from 'vue'

const graphDom = ref(null)
let graphExample = null

//初始化图谱
async function initGraph(params) {
  const {optionsConfig, data} = handleData(params)
  const options = {
    data,
    optionsConfig,
    container: graphDom.value,
    width: graphDom.value.clientWidth,
    height: graphDom.value.clientHeight,
  }
  const graphClass = new graphMethod(options)
  graphClass.initGraph((graph) => {
    graphExample = graph
    addResizeEvent()
  })
}


//添加自适应事件
function addResizeEvent() {
  // 监听全屏事件
  window.addEventListener('resize', handleFullscreenChange)
}

// 移除自适应事件
function removeEvent() {
  window.removeEventListener('resize', handleFullscreenChange)
}

// 显示全屏
function showFull() {
  handleFullscreenChange()
}

// 显示全屏事件
function handleFullscreenChange() {
  const width = graphDom.value.clientWidth
  const height = graphDom.value.clientHeight
  graphExample.setSize(width, height)
  graphExample.resize()
  graphExample.fitView({direction: "both"}, false)
}

// 组件销毁前
onBeforeUnmount(() => {
  graphExample?.clear()
  graphExample?.destroy()
  removeEvent()
})
defineExpose({initGraph, showFull})
</script>

<style scoped lang="less">
.root_graph {
  width: 100%;
  height: 100%;
}
</style>
